<template>
  <div class="page">
    <div class="qr-scanner">
      <div class="box" id="box">
          <div class="line"></div>
          <div class="angle"></div>
      </div>
       <video v-if="isVideo" class="video"></video>
       <canvas id="canvas" class="canvas"></canvas>
    </div>
  </div>
</template>

<script>
import jsQR from "jsqr";

export default {
 
  data() {
    return {
      isVideo: true,
      code: "",
    };
  },
  mounted() {
    this.onload()
  },
  methods: {
    onload() {
      let video = document.querySelector("video")
      let _this = this
      navigator.mediaDevices
        .getUserMedia({ video: { facingMode: "environment" } })
        .then(function (stream) {
          video.srcObject = stream
          video.setAttribute("playsinline", true) // required to tell iOS safari we don't want fullscreen
          video.play()
          requestAnimationFrame(_this.tick)
        });
    },
    tick() {
      let video = document.querySelector("video")
      let canvasElement = document.getElementById("canvas")
      let canvas = canvasElement.getContext("2d")
      let box = document.getElementById("box")
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        canvasElement.hidden = false
        canvasElement.height = window.screen.availHeight
        canvasElement.width = video.videoWidth
        canvas.drawImage(
          video,
          0,
          0,
          video.videoWidth,
          window.screen.availHeight
        );
         let imageData = canvas.getImageData(
          box.getBoundingClientRect().left,
          box.getBoundingClientRect().top,
          box.offsetWidth,
          box.offsetHeight
        );
        let code = jsQR(imageData.data, imageData.width, imageData.height, {
          inversionAttempts: "dontInvert",
        });
        if (code) {
          // this.drawLine(
          //   code.location.topLeftCorner,
          //   code.location.topRightCorner,
          //   "#02D32C"
          // );
          // this.drawLine(
          //   code.location.topRightCorner,
          //   code.location.bottomRightCorner,
          //   "#02D32C"
          // );
          // this.drawLine(
          //   code.location.bottomRightCorner,
          //   code.location.bottomLeftCorner,
          //   "#02D32C"
          // );
          // this.drawLine(
          //   code.location.bottomLeftCorner,
          //   code.location.topLeftCorner,
          //   "#02D32C"
          // );
          if (code.data) {
            alert('aaaa' + code.data)
         
          }
        } 
      }
      requestAnimationFrame(this.tick)
    },

    drawLine(begin, end, color) {
      let canvasElement = document.getElementById("canvas")
      let canvas = canvasElement.getContext("2d")
      canvas.beginPath()
      canvas.moveTo(begin.x, begin.y)
      canvas.lineTo(end.x, end.y)
      canvas.lineWidth = 4
      canvas.strokeStyle = color
      canvas.stroke()
    },
    close() {
      this.isVideo = false
    },
    
  },
};
</script>

<style >
.page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  
}
.close-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: left;
}

.qrbox {
  background: rgba(0, 0, 0, 0.274);
  width: 100%;
  height: 100%;
  position: relative;

}

.canvas{
  position: absolute;
  top: 0;
  left: 0;
}

.video{
  position: absolute;
  display: none;
  top: 0;
  left: 0;
}

.qr-scanner {
        background-image:
            linear-gradient(0deg,
            transparent 24%,
            rgba(32, 255, 77, 0.1) 25%,
            rgba(32, 255, 77, 0.1) 26%,
            transparent 27%,
            transparent 74%,
            rgba(32, 255, 77, 0.1) 75%,
            rgba(32, 255, 77, 0.1) 76%,
            transparent 77%,
            transparent),
            linear-gradient(90deg,
            transparent 24%,
            rgba(32, 255, 77, 0.1) 25%,
            rgba(32, 255, 77, 0.1) 26%,
            transparent 27%,
            transparent 74%,
            rgba(32, 255, 77, 0.1) 75%,
            rgba(32, 255, 77, 0.1) 76%,
            transparent 77%,
            transparent);
            background-size: 3rem 3rem;
            background-position: -1rem -1rem;
            width: 100%;
            height: 100%;
            position: relative;
           background-color: #111;
        
    }

    .qr-scanner .box {
        width: 75vw;
        height: 75vw;
        max-height: 75vh;
        max-width: 75vh;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        /* border: 0.1rem solid rgba(0, 255, 51, 0.2); */
        z-index: 99;
    }
 
    .qr-scanner .line {
        height: calc(100% - 2px);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
        border-bottom: 3px solid #00ff33;
        transform: translateY(-100%);
        animation: radar-beam 2s infinite;
        animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
        animation-delay: 1.4s;
    }
 
    .qr-scanner .box:after,
    .qr-scanner .box:before,
    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
        content: '';
        display: block;
        position: absolute;
        width: 3vw;
        height: 3vw;
 
        border: 0.2rem solid transparent;
    }
 
    .qr-scanner .box:after,
    .qr-scanner .box:before {
        top: 0;
        border-top-color: #00ff33;
    }
 
    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
        bottom: 0;
        border-bottom-color: #00ff33;
    }
 
    .qr-scanner .box:before,
    .qr-scanner .angle:before {
        left: 0;
        border-left-color: #00ff33;
    }
 
    .qr-scanner .box:after,
    .qr-scanner .angle:after {
        right: 0;
        border-right-color: #00ff33;
    }
 
    @keyframes radar-beam {
        0% {
            transform: translateY(-100%);
        }
 
        100% {
            transform: translateY(0);
        }
    }
 
 
</style>